<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';

import { Page } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';

import { Card, Col, Row, TabPane, Tabs } from 'ant-design-vue';

import StatisticCard from '#/components/hotel/StatisticsCard.vue';

import ApiTemplates from './components/ApiTemplates.vue';
import DependencyManagement from './components/DependencyManagement.vue';
// 子组件
import FormTemplates from './components/FormTemplates.vue';
import PermissionManagement from './components/PermissionManagement.vue';
import ReportTemplates from './components/ReportTemplates.vue';
import ReuseStatistics from './components/ReuseStatistics.vue';
import VersionManagement from './components/VersionManagement.vue';
import WorkflowNodes from './components/WorkflowNodes.vue';

// 技术资源概览数据
const overview = reactive({
  formTemplates: 0,
  reportTemplates: 0,
  workflowNodes: 0,
  apiTemplates: 0,
});

// 当前激活的技术资源标签
const activeTechnicalTab = ref('forms');

// 加载技术资源概览数据
const loadTechnicalOverview = async () => {
  try {
    // TODO: 调用API获取技术资源概览数据
    overview.formTemplates = 45;
    overview.reportTemplates = 32;
    overview.workflowNodes = 28;
    overview.apiTemplates = 18;
  } catch (error) {
    console.error('加载技术资源概览失败:', error);
  }
};

onMounted(() => {
  loadTechnicalOverview();
});
</script>

<template>
  <div class="technical-resource">
    <Page
      title="技术资源管理"
      subtitle="表单、报表、流程节点、接口模板等低代码组件的统一注册、版本管理和跨子SaaS复用"
    >
      <!-- 技术资源概览统计 -->
      <div class="technical-overview">
        <Row :gutter="16">
          <Col :span="6">
            <StatisticCard
              title="表单模板"
              :value="overview.formTemplates"
              :precision="0"
              suffix="个"
              :value-style="{ color: '#3f8600' }"
            >
              <template #icon>
                <IconifyIcon icon="mdi:form-select" />
              </template>
            </StatisticCard>
          </Col>
          <Col :span="6">
            <StatisticCard
              title="报表模板"
              :value="overview.reportTemplates"
              :precision="0"
              suffix="个"
              :value-style="{ color: '#1890ff' }"
            >
              <template #icon>
                <IconifyIcon icon="mdi:chart-box" />
              </template>
            </StatisticCard>
          </Col>
          <Col :span="6">
            <StatisticCard
              title="流程节点"
              :value="overview.workflowNodes"
              :precision="0"
              suffix="个"
              :value-style="{ color: '#722ed1' }"
            >
              <template #icon>
                <IconifyIcon icon="mdi:flow-parallel" />
              </template>
            </StatisticCard>
          </Col>
          <Col :span="6">
            <StatisticCard
              title="接口模板"
              :value="overview.apiTemplates"
              :precision="0"
              suffix="个"
              :value-style="{ color: '#eb2f96' }"
            >
              <template #icon>
                <IconifyIcon icon="mdi:api" />
              </template>
            </StatisticCard>
          </Col>
        </Row>
      </div>

      <!-- 技术资源分类管理 -->
      <div class="technical-categories">
        <Card title="技术资源分类管理" :bordered="false">
          <Tabs v-model:active-key="activeTechnicalTab">
            <TabPane key="forms" tab="表单模板">
              <FormTemplates />
            </TabPane>
            <TabPane key="reports" tab="报表模板">
              <ReportTemplates />
            </TabPane>
            <TabPane key="workflows" tab="流程节点">
              <WorkflowNodes />
            </TabPane>
            <TabPane key="apis" tab="接口模板">
              <ApiTemplates />
            </TabPane>
          </Tabs>
        </Card>
      </div>

      <!-- 版本管理 -->
      <div class="version-management">
        <Card title="版本管理" :bordered="false">
          <VersionManagement />
        </Card>
      </div>

      <!-- 依赖关系管理 -->
      <div class="dependency-management">
        <Card title="依赖关系管理" :bordered="false">
          <DependencyManagement />
        </Card>
      </div>

      <!-- 权限管理 -->
      <div class="permission-management">
        <Card title="权限管理" :bordered="false">
          <PermissionManagement />
        </Card>
      </div>

      <!-- 复用统计 -->
      <div class="reuse-statistics">
        <Card title="复用统计" :bordered="false">
          <ReuseStatistics />
        </Card>
      </div>
    </Page>
  </div>
</template>

<style scoped>
.technical-resource {
  padding: 20px;
}

.technical-overview {
  margin-bottom: 24px;
}

.technical-categories {
  margin-bottom: 24px;
}

.version-management {
  margin-bottom: 24px;
}

.dependency-management {
  margin-bottom: 24px;
}

.permission-management {
  margin-bottom: 24px;
}

.reuse-statistics {
  margin-bottom: 24px;
}
</style>
